<template>
  <div class="app-container">

    <el-form
      ref="form"
      v-loading="loading"
      :model="model"
      label-width="120px"
    >

      <el-form-item hidden="hidden" disabled="disabled" label="id">
        <el-input v-model="model.id" disabled="disabled" />
      </el-form-item>

      <el-form-item hidden="hidden" disabled="disabled" label="id">
        <el-input v-model="model.categoryId" disabled="disabled" />
      </el-form-item>

      <el-form-item label="文章标题">
        <el-input v-model="model.title" />
      </el-form-item>

      <el-form-item label="副标题">
        <el-input v-model="model.subtitle" />
      </el-form-item>

      <el-form-item label="内容">
        <mavon-editor v-model="model.content" @save="save" />
      </el-form-item>

      <el-form-item v-show="model.createTime" label="创建时间">
        <el-col :span="24">
          <el-date-picker
            v-model="model.createTime"
            disabled="disabled"
            type="datetime"
            placeholder="请选择一个时间"
            style="width: 100%;"
          />
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{ action }}</el-button>
        <el-button type="info" @click="back">返回</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>

import { getOne, createOne, update } from '@/api/blog/article'
import { getOne as getOneCategory } from '@/api/blog/category'

import Bus from '@/utils/bus'

export default {
  data() {
    return {
      loading: true,
      isShowCateGoryDialog: false,
      action: '创建',
      model: {}
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    Bus.$on('selected', (data) => {
      this.selected(data.id, data.val)
    })
  },
  methods: {
    async fetchData() {
      const id = this.$route.params.id
      this.model.categoryId = this.$route.params.categoryId
      if (!id) {
        this.loading = false
        return
      }
      this.action = '修改'
      const { data } = await getOne(id)
      let categoryName
      if (data.categoryId) {
        const response = await getOneCategory(data.categoryId)
        categoryName = response.data.name
        console.log(this.model)
      }
      this.model = data
      this.model.categoryName = categoryName
      this.loading = false
    },

    async onSubmit() {
      let res
      if (this.model.id) {
        res = await update(this.model)
      } else {
        res = await createOne(this.model)
      }
      if (res.code === 0) {
        this.$message.success('操作成功')
        this.back()
      }
    },
    back() {
      this.$router.go(-1)
    },
    save() {
      console.log(this.model.content)
    },
    showCategorySelect() {
      this.isShowCateGoryDialog = true
      // this.$nextTick(() => { this.$refs.categorySelect.init() })
    },

    selected(data) {
      console.log(data)
      this.node = data
    }

  }
}

</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>
